import { ref, watch } from 'vue';

/**
 * 使用本地存储的响应式数据
 * @param {string} key - 存储键名
 * @param {any} defaultValue - 默认值
 * @returns {object} 响应式数据
 */
export function useLocalStorage(key, defaultValue) {
  // 尝试从localStorage获取数据
  const storedValue = localStorage.getItem(key);
  
  // 创建响应式数据
  const data = ref(
    storedValue ? JSON.parse(storedValue) : defaultValue
  );
  
  // 监听数据变化，自动保存到localStorage
  watch(
    data,
    (newValue) => {
      localStorage.setItem(key, JSON.stringify(newValue));
    },
    { deep: true }
  );
  
  return data;
}

/**
 * 从localStorage中获取数据
 * @param {string} key - 存储键名
 * @param {any} defaultValue - 默认值
 * @returns {any} 存储的数据或默认值
 */
export function getStorageItem(key, defaultValue = null) {
  const value = localStorage.getItem(key);
  return value ? JSON.parse(value) : defaultValue;
}

/**
 * 保存数据到localStorage
 * @param {string} key - 存储键名
 * @param {any} value - 要存储的数据
 */
export function setStorageItem(key, value) {
  localStorage.setItem(key, JSON.stringify(value));
}

/**
 * 从localStorage中移除数据
 * @param {string} key - 存储键名
 */
export function removeStorageItem(key) {
  localStorage.removeItem(key);
}

/**
 * 清空localStorage
 */
export function clearStorage() {
  localStorage.clear();
} 